<template>
  <div class="music-assistant">
    <div class="music-assistant-content">
      <h2>音乐助手</h2>
      
      <!-- 聊天记录 -->
      <div class="chat-history">
        <div v-for="msg in messages" :key="msg.id" class="chat-message" :class="{ 'ai-message': msg.senderType === 'ai', 'user-message': msg.senderType === 'user' }">
          <div class="message-bubble">{{ msg.messageContent }}</div>
          <div class="message-meta">
            <span class="message-username">{{ msg.senderType === 'ai' ? 'AI助手' : '用户' }}</span>
            <span class="message-timestamp">{{ msg.timestamp }}</span>
          </div>
        </div>
      </div>
      
      <!-- 输入框 -->
      <input v-model="userQuery" placeholder="来问问你感兴趣的国风音乐问题吧！~" class="chinese-input"/>
      
      <!-- 获取推荐按钮 -->
      <button @click="getMusicRecommendation" class="chinese-button">获取答案</button>
      
      <!-- 显示加载中 -->
      <div v-if="loading" class="loading">加载中...</div>
      
      <!-- 显示错误信息 -->
      <div v-if="error" class="error">{{ error }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';

const userQuery = ref('');
const recommendations = ref('');
const error = ref('');
const loading = ref(false);
const messages = ref([]);

const getMusicRecommendation = async () => {
  if (!userQuery.value.trim()) {
    error.value = '请输入查询内容';
    return;
  }
  
  loading.value = true;
  error.value = '';
  recommendations.value = '';
  
  try {
    const response = await axios.post('http://127.0.0.1:5000/music-recommendation', {
      query: userQuery.value
    });
  
    if (response.data.status === 'success') {
      recommendations.value = response.data.data;
      messages.value.push({
        id: messages.value.length + 1,
        senderType: 'user',
        messageContent: userQuery.value,
        timestamp: new Date().toISOString()
      });
      messages.value.push({
        id: messages.value.length + 1,
        senderType: 'ai',
        messageContent: response.data.data,
        timestamp: new Date().toISOString()
      });
    } else {
      error.value = '获取推荐失败：' + response.data.message;
    }
  } catch (err) {
    error.value = '请求出错：' + err.message;
  } finally {
    loading.value = false;
  }
};
const copyText = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    alert('内容已复制到剪贴板');
  }).catch(err => {
    console.error('复制失败:', err);
  });
};
</script>
<style scoped>
body, html {
  height: 100%;
  margin: 0;
  font-family: 'KaiTi', 'Microsoft YaHei', sans-serif;
  background-color: #f5f5f5;
  background-image: url('chinese_pattern_background.jpg'); /* 中国风背景图案 */
  background-size: cover;
}

.music-assistant {
  max-width: 800px;
  width: 90%;
  margin: 20px auto; /* 上下左右留白 */
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(233, 221, 221, 0.2);
}

.music-assistant-content {
  max-width: 100%;
}

.chinese-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background: #fff;
  font-family: 'KaiTi', sans-serif;
}

.chinese-button {
  padding: 10px 20px;
  background-color: #d32f2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  background: #F2BE45;
  border: 1px solid #e0e02e;
  font-family: 'KaiTi', sans-serif;
  transition: background-color 0.3s;
}

.chinese-button:hover {
  background-color: #e0e02e;
}

.loading {
  color: #000000;
}

.chat-history {
  background: none;
  padding: 0;
  max-height: none;
  overflow-y: visible;
}

.chat-message {
  display: flex;
  margin-bottom: 20px;
}

.ai-message .message-bubble {
  background-color: #e8f5e9;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.user-message .message-bubble {
  background-color: #f0f0f0;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  align-self: flex-end;
}

.message-bubble {
  padding: 12px 16px;
  max-width: 60%;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

.message-meta {
  margin-left: 10px;
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
}

.message-username {
  display: block;
  font-weight: bold;
}

.message-timestamp {
  display: block;
  margin-left: 5px;
}

.error {
  color: #e0e02e;
  background-color: #ffcdd2;
  padding: 5px;
  border-radius: 4px;
}

/* 定制滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #e0e02e;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>